<template>
  <div>
    <van-cell title="搜索历史" @click="show = true"
      ><van-icon name="delete-o" v-show="!show" />
      <span @click="delAllHistory" v-show="show">全部删除</span>
      <span @click.stop="show = false" v-show="show">完成</span></van-cell
    >
    <van-cell
      v-for="(item, index) in historyArr"
      :key="index"
      @click="search(item)"
    >
      <van-icon name="cross" v-if="show" @click="delone(item)" />
      <template #title>
        <span>{{ item }}</span>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { setHistory, removeHistory } from '@/utils/auth'
export default {
  data() {
    return {
      show: false
    }
  },
  props: {
    historyArr: {
      type: Array
    }
  },
  methods: {
    delAllHistory() {
      removeHistory()
      this.$emit('updateHistoryArr')
    },
    delone(val) {
      setHistory(this.historyArr.filter((item) => item !== val))
      this.$emit('updateHistoryArr')
    },
    search(keywords) {
      this.$emit('getKeywordsFromHistory', keywords)
    }
  }
}
</script>

<style lang="less" scoped>
.delete-o {
  font-size: 16px;
  line-height: inherit;
}

.cross-icon {
  font-size: 28px;
  border: 1px solid #000;
  // width: 14px;
  height: 0.36rem;
  border-radius: 50%;
}
</style>
